import { useRef, useEffect, useMemo } from "react";

import * as THREE from "three";

import floor_point_vert from "../shader/floor_point.vert.glsl";
import floor_point_frag from "../shader/floor_point.frag.glsl";

import point_vert from "../shader/test/point_ver.glsl";
import point_frag from "../shader/test/point_frag.glsl";

type Uniforms = {
  u_time: THREE.IUniform;
  u_speedFactor: THREE.IUniform;
};

function FloorParticle({ uniforms }: { uniforms: Uniforms }) {
  let geometry_list: Array<THREE.BufferGeometry> = [];
  let material_list: Array<THREE.ShaderMaterial> = [];
  // 分段数
  const count = 250;
  // 半径
  const radius_list: Array<number> = [5, 5.4, 5.8, 6.2, 6.6];
  // 存放圆周点的数组
  const positions_list: Array<Float32Array> = [];
  // 索引
  // 将index_list类型声明为Float32Array
  const index_list = new Uint16Array(count);

  for (let i = 0; i < 5; i++) {
    geometry_list.push(new THREE.BufferGeometry());
    positions_list.push(new Float32Array(count * 3));
  }

  const height = [0, 1, 1.5, 2, 2.5];
  for (let index = 0; index < 5; index++) {
    for (let i = 0; i < count; i++) {
      const angle = (i / count) * 2 * Math.PI;
      const x = radius_list[index] * Math.cos(angle);
      const y = radius_list[index] * Math.sin(angle);
      const z = 0;
      positions_list[index][i * 3] = x;
      positions_list[index][i * 3 + 1] = y;
      positions_list[index][i * 3 + 2] = z;
      index_list[i] = i;
    }
    material_list[index] = new THREE.ShaderMaterial({
      uniforms: {
        u_color: { value: new THREE.Color("#00ffd9") },
        u_size: { value: 3 },
        u_time: uniforms.u_time,
        u_total: { value: count },
        u_height: { value: height[index] },
      },
      vertexShader: floor_point_vert,
      fragmentShader: floor_point_frag,
      transparent: true,
      depthTest: true,
    });
    geometry_list[index].setAttribute("position", new THREE.BufferAttribute(positions_list[index], 3));
    geometry_list[index].setAttribute("a_index", new THREE.Uint16BufferAttribute(index_list, 1));
    //   const circle = new THREE.Points(geometry_list[index], material);
    //   circle.rotation.x = -Math.PI / 2;
    //   circle.position.set(0, -3000, 0);
    //   mesh.add(circle);
  }

  return (
    <>
      {geometry_list.map((geometry, index) => {
        return (
          <points key={index} geometry={geometry} material={material_list[index]} rotation={[-Math.PI / 2, 0, 0]} />
        );
      })}
    </>
  );
}

export default FloorParticle;
